<template>
  <ul class="list-container">
    <li v-for="item in lists.rows" :key="item.id" class="entry-list">
      <div class="entry">
        <div class="meta-container">
          <a class="user" href="">{{ item.name }}</a>
          <div class="date">{{ formatDate(item.createDate) }}</div>
        </div>
        <div class="content">
          <router-link
            :to="{ name: 'post', params: { id: item.id } }"
            class="link"
          >
            <div class="content-main">
              <div class="title">{{ item.title }}</div>
              <div class="abstract">{{ item.description }}</div>
              <ul class="action-list">
                <li class="item eye">
                  <Icon type="eye" /><span>{{ item.scanNumber }}</span>
                </li>
                <li class="item like">
                  <Icon type="like" /><span>{{ item.like }}</span>
                </li>
                <li class="item message">
                  <Icon type="message" /><span>{{ item.commentNumber }}</span>
                </li>
              </ul>
            </div>
            <img class="thumb" :src="item.pic" alt="" v-if="item.pic" />
          </router-link>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import getList from "@/api/getList";
import Icon from "@/components/Icon";
import debounce from "@/utils/debouce";
import formatDate from "@/utils/formatDate";
export default {
  components: {
    Icon,
  },
  data() {
    return {
      lists: [],
      isLoading: false,
    };
  },
  async created() {
    //获取数据
    this.lists = await getList();
  },
  async mounted() {
    document.addEventListener("scroll", () => {
      if (this.isLoading) {
        return;
      }
      const desc =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight -
        document.documentElement.scrollHeight;
      if (desc >= -10) {
        debounce(this.fetchMore());
      }
    });
  },
  methods: {
    async fetchMore() {
      this.isLoading = true;
      const resp = await getList();
      this.lists.rows = this.lists.rows.concat(resp.rows);
      this.isLoading = false;
    },
    formatDate,
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/common.less";
.list-container {
  padding: 12px;
  .entry-list {
    .entry {
      cursor: pointer;
      position: relative;
      background: #fff;
      padding: 12px 20px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      &:hover {
        background-color: #f3f5f8fd;
      }
      .meta-container {
        display: flex;
        align-items: center;
        .user {
          position: relative;
          display: flex;
          align-items: center;
          margin-right: 8px;
          max-width: 162px;
          font-size: 13px;
          line-height: 22px;
          color: #4e5969;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }
        .date {
          position: relative;
          padding: 0 10px;
          line-height: 22px;
          font-size: 13px;
          flex-shrink: 0;
        }
      }
      .content .link {
        display: flex;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e6eb;
        margin-top: 10px;
        width: 100%;
        .content-main {
          flex: 1 1 auto;
          .title {
            display: flex;
            margin-bottom: 8px;
            font-weight: 700;
            font-size: 16px;
          }
          .abstract {
            margin-bottom: 10px;
            color: #86909c;
            font-size: 13px;
            line-height: 22px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .action-list {
            display: flex;
            align-items: center;
            .item {
              position: relative;
              margin-right: 20px;
              font-size: 13px;
              line-height: 20px;
              color: #4e5969;
              flex-shrink: 0;
            }
          }
        }
        .thumb {
          flex: 0 0 auto;
          width: 120px;
          height: 80px;
          margin-left: 24px;
          background-color: #fff;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>